<template>
    <div>
        <div class="editor-nav">
            <router-link to="/share/" style="float: left; margin-top: 5px; margin-left: 15px;">
                <img src="../../assets/themes/images/exit.png" height="35" width="35" />
            </router-link>
            <div class='button'  style="float: right; margin-top: 5px; margin-right: 15px;" @click="put_data">
                <img src="../../assets/themes/images/push.png" height="35" width="35" />
            </div>
        </div>
        <br />
        <van-dropdown-menu>
            <van-dropdown-item v-model="type" :options="option" />
        </van-dropdown-menu>
        <van-cell-group>
            <van-field v-model="title" label="标题" placeholder="请输入文章标题" />
            <van-field v-model="intro" label="简介" placeholder="请输入文章标题" />
            <van-field
                v-model="content_text"
                rows="2"
                autosize
                label="正文"
                type="textarea"
                maxlength="450"
                placeholder="在此编辑正文"
                show-word-limit
            />
        </van-cell-group>
        <van-uploader v-model="fileList" multiple :after-read="afterRead" />
    </div>
</template>


<script>
import Vue from 'vue';
import { Field } from 'vant';
import 'vant/lib/field/style';
import { DropdownMenu, DropdownItem } from 'vant';
import 'vant/lib/dropdown-item/style'
import 'vant/lib/dropdown-menu/style'
import { Uploader } from 'vant';
import 'vant/lib/uploader/style'
import { Cell, CellGroup } from 'vant';
import 'vant/lib/cell/style'
import 'vant/lib/cell-group/style'

Vue.use(Cell);
Vue.use(CellGroup);
Vue.use(Uploader);
Vue.use(DropdownMenu);
Vue.use(DropdownItem);
Vue.use(Field);

let content_data = new FormData();
    export default {
        data() {
            return {
                title: '',
                content_text: '',
                intro:'',
                type: '游玩',
                option:[
                    { text: '游玩', value: '游玩' },
                    { text: '丽人', value: '丽人' },
                    { text: '宠物', value: '宠物' },
                    { text: '美食', value: '美食' },
                    { text: '健身', value: '健身' },
                    { text: '购物', value: '购物' },
                ],
                fileList:[],
                // content_data: {},
            }
        },
        methods: {
            put_data() {
                if ( this.title == false ){

                    alert("标题不能为空")
                }
                else if ( this.content_text == false ){
                    alert("内容不能为空")
                }
                else if ( this.intro == false ) {
                    alert("简介不能为空")
                }
                else if ( this.fileList == false ) {
                    alert("请最少插入一张图片")
                }
                else{
                    content_data = new FormData();
                    // this.content_data = {
                    //     "title":this.title,
                    //     "type":this.type,
                    //     "content_text":this.content_text,
                    // }
                    content_data.append("session_id", localStorage.getItem('sessionid'))
                    content_data.append("id", "")
                    content_data.append("title", this.title)
                    content_data.append("type", this.type)
                    content_data.append("content_text", this.content_text)
                    content_data.append("content_intro", this.intro)
                    console.log(this.fileList)
                    for (let i in this.fileList){
                        console.log(this.fileList[i].file, "jghgh")
                        content_data.append("imags", this.fileList[i].file)
                    }
                    this.$axios.post('get_data/up_content/', content_data, {
                        headers:{'Content-Type': 'multipart/form-data'}
                    }).then(res => {
                        console.log(res.data)
                    })
                    this.$router.push({path:'/find'})
                }
                // console.log(content_data)
            },
            afterRead(file) {
                console.log(file.file)
                // console.log(this.fileList)
            }
        }
    }
</script>

<style scoped>
.editor-nav{
    width: 100%; 
    height: 45px;
    background-color: #ECF5FF;
    box-shadow: 0 5px 10px -5px rgba(0, 0, 0, 0.8);
}
</style>